<template>
	<page-loading :show='pageLoading'>
		<view class="list">
			<!-- 总收益 -->
			<view class="card">
				<!-- <view class="card-date">
					
				</view> -->

				<view class="flex flex-ai-c card-select flex-jc-fe" @click="isDate = true" style="padding-top: 20rpx;">
					<view v-if="startDate&&endDate">{{startDate}}至{{endDate}}</view>
					<view style="margin-right: 13rpx;" v-else>{{selectedDate}}</view>
					
					<view>
						<u-icon name="arrow-down-fill" color="#666666" size="20rpx"></u-icon>
					</view>
				</view>

				<!-- 收益 -->
				<view class="card-2">
					<view v-if="startDate&&endDate">
						<view style="text-align: center;">
							<view class="card-2-price">{{list.earnings | million}}</view>
							<view>累计收益</view>
						</view>
					</view>
					<view class="flex flex-jc-sa flex-ai-c" style="text-align: center;" v-else>
						<view>
							<view class="card-2-price">{{list.yesterday | million}}</view>
							<view>昨日收益</view>
						</view>
						<view style="width: 2rpx;height: 74rpx;border: 2rpx dashed #EEEEEE;margin-top: 20rpx;"></view>
						<view>
							<view class="card-2-price">{{list.earnings | million}}</view>
							<view>累计收益（元）</view>
						</view>
					</view>

					<view style="margin: 24rpx 24rpx;">
						<u-line color="#F6F6F6" border-style='dashed' />
					</view>
					<!-- 数量 -->
					<view class="number flex flex-wrap-w flex-jc-sb" style="border-bottom: 2rpx solid #EEEEEE;">
						<view class="number-main mgb-20">
							<view class="fwb">{{list.andCustomerNumber}}</view>
							<view>总客户数</view>
						</view>
						<view class="number-main mgb-20">
							<view class="fwb">{{list.addMoney}}</view>
							<view>流入核销金额</view>
						</view>
						<view class="number-main mgb-20">
							<view class="fwb">{{list.lossMoney}}</view>
							<view>流出核销金额</view>
						</view>
					</view>
					<!-- 设备销售 -->
					<view>
						<view style="margin: 20rpx 26rpx;" class="fwb font-30">设备销售</view>
						<view class="number flex flex-wrap-w flex-jc-sb" style="border-bottom: 2rpx solid #EEEEEE;">
							<view class="mg-20">
								<view class="fwb font-30">{{list.theCardSales}}</view>
								<view class="font-24">月卡销售量</view>
							</view>
							<view class="mg-20">
								<view class="fwb font-30">{{list.timeCardSales}}</view>
								<view class="font-24">次卡销售量</view>
							</view>
							<view class="mg-20">
								<view class="fwb font-30">{{list.clockSales}}</view>
								<view class="font-24">计时卡销售量</view>
							</view>
							<view class="mg-20">
								<view class="fwb font-30">{{list.topupSales}}</view>
								<view class="font-24">充值卡销售量</view>
							</view>
						</view>
					</view>
				
					<!-- 线上销售 -->
					<view>
						<view style="margin: 20rpx 26rpx;" class="fwb font-30">线上销售</view>
						<view class="number flex flex-wrap-w flex-jc-sb">
							<view class="mg-20">
								<view class="fwb font-30">{{list.onlineTheCardSales}}</view>
								<view class="font-24">月卡销售量</view>
							</view>
							<view class="mg-20">
								<view class="fwb font-30 price-color">{{list.onlineYesterday | million}}</view>
								<view class="font-24">昨日收益（元）</view>
							</view>
							<view class="mg-20">
								<view class="fwb font-30 price-color">{{list.onlineEarnings | million}}</view>
								<view class="font-24">累计收益（元）</view>
							</view>
						</view>
					</view>
				
				</view>
			</view>
			<view class="card" v-for="(item,index) in listArr" :key='item.id'>
				<view>
					<view class="flex flex-jc-sb flex-ai-cr near">
						<view class="font-30 fwb" style="margin: 20rpx 0;">{{item.station_Name}}</view>
						<view class="font-24" style="margin-top: 20rpx;">洗车机
							<text style="color: #38ACFF;">{{item.dataList.length}}</text>
						</view>
					</view>
					<!-- 总收益 -->
					<view class="card-2">
						<view v-if="startDate&&endDate">
							<view style="text-align: center;">
								<view class="card-2-price">{{item.earnings | million}}</view>
								<view>累计收益</view>
							</view>
						</view>
						<view class="flex flex-jc-sa flex-ai-c" style="text-align: center;" v-else>
							<view>
								<view class="card-2-price">{{item.yesterday | million}}</view>
								<view>昨日收益</view>
							</view>
							<view style="width: 2rpx;height: 74rpx;border: 2rpx dashed #EEEEEE;margin-top: 20rpx;"></view>
							<view>
								<view class="card-2-price">{{item.duringMonth | million}}</view>
								<view>本月收益</view>
							</view>
						</view>
					
						<view style="margin: 24rpx 24rpx;">
							<u-line color="#F6F6F6" border-style='dashed' />
						</view>
						<!-- 数量 -->
						<view class="number flex flex-wrap-w flex-jc-sb" style="border-bottom: 2rpx solid #EEEEEE;">
							<view class="number-main mgb-20">
								<view class="fwb">{{item.andCustomerNumber}}</view>
								<view>总客户数</view>
							</view>
							<view class="number-main mgb-20">
								<view class="fwb">{{item.addMoney}}</view>
								<view>流入核销金额</view>
							</view>
							<view class="number-main mgb-20">
								<view class="fwb">{{item.lossMoney}}</view>
								<view>流出核销金额</view>
							</view>
						</view>
						<!-- 设备销售 -->
						<view>
							<view style="margin: 20rpx 26rpx;" class="fwb font-30">设备销售</view>
							<view class="number flex flex-wrap-w flex-jc-sb" style="border-bottom: 2rpx solid #EEEEEE;">
								<view class="mg-20">
									<view class="fwb font-30">{{item.theCardSales}}</view>
									<view class="font-24">月卡销售量</view>
								</view>
								<view class="mg-20">
									<view class="fwb font-30">{{item.timeCardSales}}</view>
									<view class="font-24">次卡销售量</view>
								</view>
								<view class="mg-20">
									<view class="fwb font-30">{{item.clockSales}}</view>
									<view class="font-24">计时卡销售量</view>
								</view>
								<view class="mg-20">
									<view class="fwb font-30">{{item.topupSales}}</view>
									<view class="font-24">充值卡销售量</view>
								</view>
							</view>
						</view>
					
						<!-- 线上销售 -->
						<view>
							<view style="margin: 20rpx 26rpx;" class="fwb font-30">线上销售</view>
							<view class="number flex flex-wrap-w flex-jc-sb">
								<view class="mg-20">
									<view class="fwb font-30">{{item.onlineTheCardSales}}</view>
									<view class="font-24">月卡销售量</view>
								</view>
								<view class="mg-20">
									<view class="fwb font-30 price-color">{{item.onlineYesterday | million}}</view>
									<view class="font-24">昨日收益（元）</view>
								</view>
								<view class="mg-20">
									<view class="fwb font-30 price-color">{{item.onlineEarnings | million}}</view>
									<view class="font-24">累计收益（元）</view>
								</view>
							</view>
						</view>
					
					</view>
				</view>

				<!-- 列表 -->
				<tree :list='item.dataList' :index='index' :isMore='isMore' :endDate='endDate' :startDate='startDate'></tree>
			
				<!-- <view @click="change(index)" class="flex flex-jc-c" style="margin-top: 20rpx;">
					<view style="text-align: center;border-radius: 20rpx;width: 110rpx;height: 40rpx;background-color: #F4F4F4;">
						<u-icon :name="title" size="30rpx" color="#999999"></u-icon>
					</view>
				</view> -->
			</view>
			<!-- <u-loadmore :status="loadStatus" @loadmore="more" margin-top="50" /> -->
			<date v-model="isDate" toolTip='' mode="range" active-bg-color="#38ACFF" :isDateTav='true'
				:max-year="maxYear" :max-date="maxDate" @change='chooseDate'></date>
		</view>
	</page-loading>
</template>

<script src='./report_form.js'></script>

<style lang="scss">
	@import  './report_form.scss';
</style>
